<template>
	<view class="shop-container">
		<!-- 顶部导航栏 -->
		<view class="navbar">
			<view class="navbar-left" @click="goBack">
				<u-icon name="arrow-left" size="20" color="#333"></u-icon>
			</view>
			<view class="navbar-title">蓝海旗舰店</view>
			<view class="navbar-right">
				<view class="action-icon">
					<u-icon name="more-dot-fill" size="20" color="#333"></u-icon>
				</view>
				<view class="action-icon">
					<u-icon name="minus" size="20" color="#333"></u-icon>
				</view>
				<view class="action-icon">
					<u-icon name="setting" size="20" color="#333"></u-icon>
				</view>
			</view>
		</view>

		<!-- 店铺信息 -->
		<view class="store-info">
			<view class="store-left">
				<view class="store-logo">
					<img style="width: 100rpx; height: 100rpx;" src="" alt="">
				</view>
				<view class="store-details">
					<text class="store-name">Mall4J蓝海商城</text>
					<view class="store-rating">
						<text class="rating-score">5.0</text>
						<view class="rating-stars">
							<u-icon name="star" size="16" color="#ff4757"></u-icon>
							<u-icon name="star" size="16" color="#ff4757"></u-icon>
							<u-icon name="star" size="16" color="#ff4757"></u-icon>
							<u-icon name="star" size="16" color="#ff4757"></u-icon>
							<u-icon name="star" size="16" color="#ff4757"></u-icon>
						</view>
						<text class="certificate">资质证照></text>
					</view>
				</view>
			</view>
			<view class="store-right">
				<u-button 
					type="error" 
					text="关注" 
					size="mini"
					@click="followStore"
					:custom-style="followButtonStyle"
				>
					<u-icon name="heart" size="14" color="#fff" slot="icon"></u-icon>
				</u-button>
			</view>
		</view>

		<!-- 搜索栏 -->
		<view class="search-section">
			<view class="search-bar">
				<view class="search-icon">
					<u-icon name="search" size="20" color="#999"></u-icon>
				</view>
				<input 
					class="search-input" 
					placeholder="搜索" 
					v-model="searchKeyword"
					@input="onSearch"
				/>
			</view>
		</view>

		<!-- 金秋活动横幅 -->
		<view class="promo-banner">
			<img style="width: 100%; height: 300rpx;" src="/static/shop/插图.png" alt="">
		</view>

		<!-- 商品展示区域 -->
		<view class="products-section">
			<view class="section-left">
				<view class="section-header">
					<text class="section-title">今日爆款</text>
					<text class="section-subtitle">美好新生活</text>
				</view>
				<view class="product-card" @click="viewProduct('backpack')">
					<view class="product-image">
						<view class="backpack-image"></view>
					</view>
					<text class="product-name">欢宠新款...</text>
					<text class="product-price">¥ 45.00</text>
				</view>
			</view>
			<view class="section-right">
				<view class="section-header">
					<text class="section-title">新品首发</text>
					<text class="section-subtitle">大家都在买</text>
				</view>
				<view class="product-list">
					<view class="product-item" @click="viewProduct('lip-gloss')">
						<view class="product-image">
							<view class="heart-lip-gloss"></view>
						</view>
						<text class="product-name">心唇釉哑...</text>
						<text class="product-price">¥ 69.00</text>
					</view>
					<view class="product-item" @click="viewProduct('thermos')">
						<view class="product-image">
							<view class="thermos-container"></view>
						</view>
						<text class="product-name">316食品...</text>
						<text class="product-price">¥ 149.00</text>
					</view>
					<view class="product-item" @click="viewProduct('sneakers')">
						<view class="product-image">
							<view class="sneakers-image"></view>
						</view>
						<text class="product-name">港风小众...</text>
						<text class="product-price">¥ 99.00</text>
					</view>
				</view>
			</view>
		</view>

		<!-- Dior广告 -->
		<view class="dior-ad">
			<view class="ad-content">
				<view class="ad-left">
					<view class="lipstick-smears"></view>
				</view>
				<view class="ad-right">
					<text class="dior-brand">Dior</text>
					<text class="ad-title">敢出色 玩出色</text>
					<text class="ad-subtitle">999 哑光经典传奇口红</text>
					<view class="lipsticks-display">
						<view class="lipstick-1"></view>
						<view class="lipstick-2"></view>
					</view>
				</view>
			</view>
		</view>

		<!-- 额外商品区域 -->
		<view class="extra-section">
			<view class="extra-products">
				<view class="extra-item">
					<view class="gift-box"></view>
				</view>
				<view class="extra-item">
					<view class="lipstick-tubes">
						<view class="tube-1"></view>
						<view class="tube-2"></view>
					</view>
				</view>
				<view class="extra-item">
					<view class="unavailable-product">
						<view class="product-box"></view>
						<view class="removed-stamp">已下架</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部导航栏 -->
		<view class="tabbar">
			<view class="tab-item active" @click="switchTab('home')">
				<view class="tab-icon">
					<u-icon name="home" size="24" color="#ff4757"></u-icon>
				</view>
				<text class="tab-text active-text">店铺首页</text>
			</view>
			<view class="tab-item" @click="switchTab('products')">
				<view class="tab-icon">
					<u-icon name="" size="24" color="#999"></u-icon>
				</view>
				<text class="tab-text">全部商品</text>
			</view>
			<view class="tab-item" @click="switchTab('category')">
				<view class="tab-icon">
					<u-icon name="grid" size="24" color="#999"></u-icon>
				</view>
				<text class="tab-text">商品分类</text>
			</view>
			<view class="tab-item" @click="switchTab('cart')">
				<view class="tab-icon">
					<u-icon name="shopping-cart" size="24" color="#999"></u-icon>
				</view>
				<text class="tab-text">购物车</text>
			</view>
			<view class="tab-item" @click="switchTab('member')">
				<view class="tab-icon">
					<u-icon name="" size="24" color="#999"></u-icon>
				</view>
				<text class="tab-text">店铺会员</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			searchKeyword: '',
			followButtonStyle: {
				backgroundColor: '#ff4757',
				borderRadius: '20rpx',
				height: '60rpx',
				fontSize: '24rpx',
				border: 'none',
				display: 'flex',
				alignItems: 'center',
				gap: '8rpx'
			}
		}
	},
	methods: {
		// 返回上一页
		goBack() {
			uni.navigateBack()
		},
		
		// 搜索商品
		onSearch() {
			uni.showToast({
				title: '搜索功能',
				icon: 'none'
			})
		},
		
		// 关注店铺
		followStore() {
			uni.showToast({
				title: '已关注店铺',
				icon: 'success'
			})
		},
		
		// 查看商品
		viewProduct(productId) {
			uni.showToast({
				title: `查看商品: ${productId}`,
				icon: 'none'
			})
		},
		
		// 切换标签页
		switchTab(tab) {
			switch(tab) {
				case 'home':
					// 当前页面，不需要跳转
					break
				case 'products':
					uni.showToast({
						title: '全部商品',
						icon: 'none'
					})
					break
				case 'category':
					uni.showToast({
						title: '商品分类',
						icon: 'none'
					})
					break
				case 'cart':
					uni.showToast({
						title: '购物车',
						icon: 'none'
					})
					break
				case 'member':
					uni.showToast({
						title: '店铺会员',
						icon: 'none'
					})
					break
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.shop-container {
	min-height: 100vh;
	background-color: #f8f9fa;
	position: relative;
	padding-bottom: 120rpx;
}

.navbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx 30rpx;
	background-color: #fff;
	border-bottom: 1rpx solid #f0f0f0;
	
	.navbar-left {
		width: 40rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.navbar-title {
		font-size: 36rpx;
		font-weight: 600;
		color: #333;
	}
	
	.navbar-right {
		display: flex;
		gap: 20rpx;
		
		.action-icon {
			width: 40rpx;
			height: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
}

.store-info {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30rpx;
	background-color: #fff;
	
	.store-left {
		display: flex;
		align-items: center;
		
		.store-logo {
			margin-right: 20rpx;
			
			.logo-design {
				width: 80rpx;
				height: 80rpx;
				position: relative;
				
				.logo-main {
					width: 100%;
					height: 100%;
					background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
					border-radius: 12rpx;
					position: relative;
					
					&::before {
						content: '';
						position: absolute;
						top: 15rpx;
						left: 15rpx;
						right: 15rpx;
						bottom: 15rpx;
						background-color: rgba(255, 255, 255, 0.3);
						border-radius: 8rpx;
					}
				}
				
				.logo-accent {
					position: absolute;
					top: -5rpx;
					right: -5rpx;
					width: 30rpx;
					height: 30rpx;
					background: linear-gradient(135deg, #87ceeb 0%, #00bfff 100%);
					border-radius: 50%;
				}
			}
		}
		
		.store-details {
			.store-name {
				display: block;
				font-size: 32rpx;
				font-weight: 600;
				color: #333;
				margin-bottom: 8rpx;
			}
			
			.store-rating {
				display: flex;
				align-items: center;
				
				.rating-score {
					font-size: 26rpx;
					color: #333;
					margin-right: 10rpx;
				}
				
				.rating-stars {
					display: flex;
					margin-right: 15rpx;
				}
				
				.certificate {
					font-size: 24rpx;
					color: #666;
				}
			}
		}
	}
}

.search-section {
	padding: 20rpx 30rpx;
	background-color: #fff;
	
	.search-bar {
		display: flex;
		align-items: center;
		background-color: #f8f9fa;
		border-radius: 25rpx;
		padding: 20rpx 30rpx;
		
		.search-icon {
			margin-right: 20rpx;
		}
		
		.search-input {
			flex: 1;
			font-size: 28rpx;
			color: #333;
			
			&::placeholder {
				color: #999;
			}
		}
	}
}

.promo-banner {
	margin: 20rpx;
	border-radius: 16rpx;
	overflow: hidden;
	position: relative;
	
	.banner-content {
		background: linear-gradient(135deg, #d2691e 0%, #f4a460 100%);
		padding: 40rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
		
		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="3" fill="rgba(255,255,255,0.3)"/><circle cx="80" cy="30" r="2" fill="rgba(255,255,255,0.3)"/><circle cx="60" cy="70" r="2.5" fill="rgba(255,255,255,0.3)"/></svg>') repeat;
			opacity: 0.6;
		}
		
		.banner-left {
			flex: 1;
			position: relative;
			z-index: 1;
			
			.banner-title {
				display: block;
				font-size: 24rpx;
				color: #fff;
				margin-bottom: 10rpx;
				font-weight: 600;
			}
			
			.banner-main {
				display: block;
				font-size: 36rpx;
				color: #ffd700;
				font-weight: 600;
				margin-bottom: 10rpx;
			}
			
			.banner-subtitle {
				display: block;
				font-size: 26rpx;
				color: #fff;
				margin-bottom: 8rpx;
			}
			
			.banner-time {
				font-size: 22rpx;
				color: rgba(255, 255, 255, 0.8);
			}
		}
		
		.banner-right {
			position: relative;
			z-index: 1;
			
			.cosmetic-products {
				position: relative;
				width: 200rpx;
				height: 150rpx;
				
				.product {
					position: absolute;
					
					&.nail-polish {
						top: 20rpx;
						left: 20rpx;
						width: 30rpx;
						height: 40rpx;
						background-color: #ff4757;
						border-radius: 15rpx;
					}
					
					&.brand-bottle {
						top: 10rpx;
						right: 30rpx;
						width: 25rpx;
						height: 50rpx;
						background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
						border-radius: 12rpx;
					}
					
					&.brand-tube {
						top: 60rpx;
						left: 40rpx;
						width: 35rpx;
						height: 25rpx;
						background-color: #f5deb3;
						border-radius: 17rpx;
					}
					
					&.brand-jar {
						top: 70rpx;
						right: 20rpx;
						width: 40rpx;
						height: 35rpx;
						background-color: #fff;
						border-radius: 20rpx;
					}
					
					&.lipstick {
						bottom: 20rpx;
						left: 30rpx;
						width: 25rpx;
						height: 30rpx;
						background-color: #ff4757;
						border-radius: 12rpx;
					}
					
					&.ring {
						bottom: 30rpx;
						right: 40rpx;
						width: 20rpx;
						height: 20rpx;
						background-color: #c0c0c0;
						border-radius: 50%;
					}
				}
			}
		}
	}
}

.products-section {
	display: flex;
	margin: 0 20rpx 20rpx;
	gap: 20rpx;
	
	.section-left, .section-right {
		flex: 1;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		
		.section-header {
			margin-bottom: 20rpx;
			
			.section-title {
				display: block;
				font-size: 32rpx;
				font-weight: 600;
				color: #333;
				margin-bottom: 8rpx;
			}
			
			.section-subtitle {
				font-size: 24rpx;
				color: #999;
			}
		}
	}
	
	.product-card {
		.product-image {
			margin-bottom: 16rpx;
			
			.backpack-image {
				width: 100%;
				height: 200rpx;
				background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
				border-radius: 12rpx;
				position: relative;
				
				&::before {
					content: '';
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					width: 80rpx;
					height: 60rpx;
					background-color: #8b4513;
					border-radius: 8rpx;
				}
			}
		}
		
		.product-name {
			display: block;
			font-size: 26rpx;
			color: #333;
			margin-bottom: 8rpx;
		}
		
		.product-price {
			font-size: 28rpx;
			color: #ff4757;
			font-weight: 600;
		}
	}
	
	.product-list {
		.product-item {
			display: flex;
			align-items: center;
			padding: 20rpx 0;
			border-bottom: 1rpx solid #f0f0f0;
			
			&:last-child {
				border-bottom: none;
			}
			
			.product-image {
				width: 80rpx;
				height: 80rpx;
				margin-right: 20rpx;
				
				.heart-lip-gloss {
					width: 100%;
					height: 100%;
					background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
					border-radius: 50%;
					position: relative;
					
					&::before {
						content: '';
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
						width: 40rpx;
						height: 40rpx;
						background-color: #fff;
						clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
					}
				}
				
				.thermos-container {
					width: 100%;
					height: 100%;
					background-color: #333;
					border-radius: 8rpx;
					position: relative;
					
					&::before {
						content: '';
						position: absolute;
						top: 20rpx;
						left: 50%;
						transform: translateX(-50%);
						width: 60rpx;
						height: 8rpx;
						background-color: #ff4757;
						border-radius: 4rpx;
					}
				}
				
				.sneakers-image {
					width: 100%;
					height: 100%;
					background-color: #f5f5dc;
					border-radius: 8rpx;
					position: relative;
					
					&::before {
						content: '';
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
						width: 30rpx;
						height: 30rpx;
						background-color: #ff4757;
						border-radius: 50%;
					}
				}
			}
			
			.product-name {
				flex: 1;
				font-size: 26rpx;
				color: #333;
				margin-bottom: 8rpx;
			}
			
			.product-price {
				font-size: 28rpx;
				color: #ff4757;
				font-weight: 600;
			}
		}
	}
}

.dior-ad {
	margin: 0 20rpx 20rpx;
	border-radius: 16rpx;
	overflow: hidden;
	
	.ad-content {
		display: flex;
		height: 200rpx;
		
		.ad-left {
			flex: 1;
			background-color: #ff4757;
			position: relative;
			
			.lipstick-smears {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 100rpx;
				height: 60rpx;
				
				&::before {
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					width: 40rpx;
					height: 30rpx;
					background-color: rgba(255, 255, 255, 0.3);
					border-radius: 20rpx;
					transform: rotate(-15deg);
				}
				
				&::after {
					content: '';
					position: absolute;
					top: 10rpx;
					right: 0;
					width: 35rpx;
					height: 25rpx;
					background-color: rgba(255, 255, 255, 0.3);
					border-radius: 17rpx;
					transform: rotate(15deg);
				}
			}
		}
		
		.ad-right {
			flex: 1;
			background-color: #333;
			padding: 30rpx;
			position: relative;
			
			.dior-brand {
				position: absolute;
				top: 20rpx;
				right: 20rpx;
				font-size: 24rpx;
				color: #fff;
				font-weight: 600;
			}
			
			.ad-title {
				display: block;
				font-size: 32rpx;
				color: #fff;
				font-weight: 600;
				margin-bottom: 10rpx;
			}
			
			.ad-subtitle {
				font-size: 24rpx;
				color: #ccc;
			}
			
			.lipsticks-display {
				position: absolute;
				bottom: 20rpx;
				right: 20rpx;
				display: flex;
				gap: 10rpx;
				
				.lipstick-1, .lipstick-2 {
					width: 30rpx;
					height: 60rpx;
					background-color: #ff4757;
					border-radius: 15rpx;
					position: relative;
					
					&::before {
						content: '';
						position: absolute;
						top: -5rpx;
						left: 50%;
						transform: translateX(-50%);
						width: 20rpx;
						height: 10rpx;
						background-color: #333;
						border-radius: 10rpx;
					}
				}
			}
		}
	}
}

.extra-section {
	margin: 0 20rpx 20rpx;
	
	.extra-products {
		display: flex;
		gap: 20rpx;
		
		.extra-item {
			flex: 1;
			background-color: #fff;
			border-radius: 12rpx;
			padding: 20rpx;
			position: relative;
			
			.gift-box {
				width: 100%;
				height: 120rpx;
				background-color: #fff;
				border: 2rpx solid #ff69b4;
				border-radius: 8rpx;
				position: relative;
				
				&::before {
					content: '';
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					width: 60rpx;
					height: 4rpx;
					background-color: #ff69b4;
					border-radius: 2rpx;
				}
				
				&::after {
					content: '';
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					width: 4rpx;
					height: 60rpx;
					background-color: #ff69b4;
					border-radius: 2rpx;
				}
			}
			
			.lipstick-tubes {
				display: flex;
				justify-content: center;
				gap: 10rpx;
				
				.tube-1, .tube-2 {
					width: 30rpx;
					height: 50rpx;
					background-color: #333;
					border-radius: 15rpx;
					position: relative;
					
					&::before {
						content: '';
						position: absolute;
						top: 10rpx;
						left: 50%;
						transform: translateX(-50%);
						width: 20rpx;
						height: 30rpx;
						background-color: #ff4757;
						border-radius: 10rpx;
					}
				}
				
				.tube-2::before {
					top: 5rpx;
				}
			}
			
			.unavailable-product {
				position: relative;
				
				.product-box {
					width: 100%;
					height: 120rpx;
					background-color: #ccc;
					border-radius: 8rpx;
				}
				
				.removed-stamp {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					background-color: #ff4757;
					color: #fff;
					font-size: 20rpx;
					padding: 8rpx 16rpx;
					border-radius: 4rpx;
					transform: translate(-50%, -50%) rotate(-15deg);
				}
			}
		}
	}
}

.tabbar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100rpx;
	background-color: #fff;
	border-top: 1rpx solid #f0f0f0;
	display: flex;
	align-items: center;
	justify-content: space-around;
	padding-bottom: env(safe-area-inset-bottom);
	
	.tab-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		flex: 1;
		
		.tab-icon {
			margin-bottom: 8rpx;
		}
		
		.tab-text {
			font-size: 20rpx;
			color: #999;
			
			&.active-text {
				color: #ff4757;
			}
		}
		
		&.active {
			.tab-text {
				color: #ff4757;
			}
		}
	}
}
</style> 